<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../script/react.development.js"></script>
    <script src="../script/react-dom.development.js"></script>
    <script src="../script/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        //创建一个React元素，<button>我是按钮</button>
        //命令式编程
        //从const button = React.createElement('button',{},'我是按钮')

        //声明式编程，结果导向的编程
        //在React中可以通过JSX(JS扩展  extention)来创建React元素，JSX需要被翻译成JS代码，才能被React执行
        //要在React中使用JSX，必须引入babel来完成'翻译'工作
        const name = '孙悟空'
        const div = <div>
            我是一个div
            <ul>
                <li className="box" style={{backgroundColor:'red'}}>列表项</li>
                <li>{name}</li>
            </ul>
            <input type="text"/>
            </div>
        const root = ReactDOM.createRoot(document.getElementById('root'))
        root.render(div)
        /*
            JSX注意事项
                1.JSX不是字符串，不要加引号
                2.JSX中html标签应该小写，React组件应该大写开头
                3.JSX中有且只有一个根标签
                4.JSX的标签必须正确结束(自结束的标签必须写 /)
                5.在JSX中可以使用{}嵌入表达式
                    -有值的语句就是表达式
                6.如果表达式的值是空值，布尔值，undefined这些值，将不会显示
                7.在JSX中，属性可以直接在标签中设置
                    注意
                        class需要使用className代理
                        style中必须使用对象设置
                            style={{background:'red'}}
        */

    </script>
</body>
</html>